<!--
 * @Author: lee_124
 * @Date: 2022-01-24 16:45:53
 * @LastEditTime: 2022-01-25 10:06:29
 * @LastEditors: lee_124
 * @Description: 隐藏页面中某个元素的方法
 * @FilePath: /public_demo/src/views/cssHide/index.vue
-->

<template>
  <div class="root-container">
    <h1>页面隐藏元素的方式</h1>
    <div class="css-container">
      <div class="item">
        <h3>1. opacity：0</h3>
        <p :style="show1 ? 'opacity:0':'opacity:1'" @click.stop="click1">
          我是元素1，演示通过opacity进行元素隐藏, 不会改变页面布局,如果该元素已经绑定事件，点击也会触发
          <br />opacity:0 隐藏
          <br />opacity:1 显示
        </p>
        <button @click="show1 = !show1">click me</button>
      </div>

      <div class="item">
        <h3>2. visibility：hidden</h3>
        <p :style="show2 ? 'visibility:hidden':'visibility:visible'" @click.stop="click2">
          我是元素2，演示通过opacity进行元素隐藏，不会改变页面布局，但是不会触发该元素已经绑定的事
          <br />visibility:hidden 隐藏
          <br />visibility:visible 显示
        </p>
        <button @click="show2 = !show2">click me</button>
      </div>

      <div class="item">
        <h3>3. display：none</h3>
        <p :style="show3 ? 'display:none':'display:block'" @click.stop="click3">
          我是元素3，演示通过opacity进行元素隐藏，会改变页面布局，不会触发该元素已经绑定的事件
          <br />display:none 隐藏
          <br />display:block 显示
        </p>
        <button @click="show3 = !show3">click me</button>
      </div>
    </div>
    <div></div>
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      show1: false,
      show2: false,
      show3: false
    };
  },
  methods: {
    click1() {
      alert("点击了元素1");
    },
    click2() {
      alert("点击了元素2");
    },
    click3() {
      alert("点击了元素3");
    }
  }
};
</script>
<style lang='scss' scoped>
.css-container {
  width: 700px;
}
.item {
  margin-top: 20px;
  padding-bottom: 20px;
  p {
    border: 1px solid #eee;
    padding: 10px;
    margin: 10px;
  }
  border-bottom: 1px solid #000;
}
</style>